<template>
  <el-drawer
    v-model="visible"
    title="设置"
    direction="rtl"
    size="400px"
    :before-close="handleClose"
  >
    <div class="settings-panel">
      <!-- 主题设置 -->
      <el-card class="settings-section">
        <template #header>
          <span>主题设置</span>
        </template>
        
        <div class="setting-group">
          <div class="setting-item">
            <span class="setting-label">主题模式</span>
            <el-radio-group v-model="currentThemeMode" @change="handleThemeModeChange">
              <el-radio-button label="light">浅色</el-radio-button>
              <el-radio-button label="dark">深色</el-radio-button>
              <el-radio-button label="auto">自动</el-radio-button>
            </el-radio-group>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">主色调</span>
            <el-color-picker
              v-model="primaryColor"
              @change="handlePrimaryColorChange"
              :predefine="predefineColors"
            />
          </div>
          
          <div class="setting-item">
            <span class="setting-label">字体大小</span>
            <el-radio-group v-model="fontSize" @change="handleFontSizeChange">
              <el-radio-button label="small">小</el-radio-button>
              <el-radio-button label="medium">中</el-radio-button>
              <el-radio-button label="large">大</el-radio-button>
            </el-radio-group>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">紧凑模式</span>
            <el-switch
              v-model="compactMode"
              @change="handleCompactModeChange"
            />
          </div>
          
          <div class="setting-actions">
            <el-button @click="resetTheme" size="small">重置主题</el-button>
          </div>
        </div>
      </el-card>

      <!-- 性能设置 -->
      <el-card class="settings-section">
        <template #header>
          <div class="section-header">
            <span>性能设置</span>
            <el-button 
              size="small" 
              @click="showPerformanceMonitor = true"
            >
              性能监控
            </el-button>
          </div>
        </template>
        
        <div class="setting-group">
          <div class="setting-item">
            <span class="setting-label">虚拟滚动阈值</span>
            <el-input-number
              v-model="virtualScrollThreshold"
              :min="50"
              :max="500"
              :step="10"
              size="small"
              @change="handleVirtualScrollThresholdChange"
            />
            <div class="setting-description">
              超过此数量的列表项将使用虚拟滚动
            </div>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">搜索防抖延迟 (ms)</span>
            <el-input-number
              v-model="searchDebounceDelay"
              :min="100"
              :max="1000"
              :step="50"
              size="small"
              @change="handleSearchDebounceDelayChange"
            />
            <div class="setting-description">
              搜索输入的防抖延迟时间
            </div>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">缓存大小</span>
            <el-input-number
              v-model="cacheSize"
              :min="50"
              :max="1000"
              :step="50"
              size="small"
              @change="handleCacheSizeChange"
            />
            <div class="setting-description">
              搜索结果缓存的最大条目数
            </div>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">启用性能监控</span>
            <el-switch
              v-model="enablePerformanceMonitoring"
              @change="handlePerformanceMonitoringChange"
            />
            <div class="setting-description">
              在开发环境中启用性能监控
            </div>
          </div>
          
          <div class="setting-actions">
            <el-button @click="clearAllCaches" size="small">清空缓存</el-button>
            <el-button @click="resetPerformanceSettings" size="small">重置设置</el-button>
          </div>
        </div>
      </el-card>

      <!-- 用户偏好 -->
      <el-card class="settings-section">
        <template #header>
          <span>用户偏好</span>
        </template>
        
        <div class="setting-group">
          <div class="setting-item">
            <span class="setting-label">默认搜索类型</span>
            <el-select v-model="defaultSearchType" size="small">
              <el-option label="文件名搜索" value="filename" />
              <el-option label="内容搜索" value="content" />
              <el-option label="高级搜索" value="advanced" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">每页显示数量</span>
            <el-select v-model="defaultPageSize" size="small">
              <el-option label="20" :value="20" />
              <el-option label="50" :value="50" />
              <el-option label="100" :value="100" />
              <el-option label="200" :value="200" />
            </el-select>
          </div>
          
          <div class="setting-item">
            <span class="setting-label">自动保存搜索历史</span>
            <el-switch v-model="autoSaveSearchHistory" />
          </div>
          
          <div class="setting-item">
            <span class="setting-label">显示文件预览</span>
            <el-switch v-model="showFilePreview" />
          </div>
        </div>
      </el-card>

      <!-- 关于 -->
      <el-card class="settings-section">
        <template #header>
          <span>关于</span>
        </template>
        
        <div class="about-info">
          <div class="about-item">
            <span class="about-label">应用版本:</span>
            <span class="about-value">1.0.0</span>
          </div>
          <div class="about-item">
            <span class="about-label">构建时间:</span>
            <span class="about-value">{{ buildTime }}</span>
          </div>
          <div class="about-item">
            <span class="about-label">技术栈:</span>
            <span class="about-value">Vue 3 + TypeScript + Element Plus</span>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 性能监控弹窗 -->
    <PerformanceMonitor v-model="showPerformanceMonitor" />
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useTheme } from '../composables/useTheme'
import { useSearchStore } from '../stores/search'
import PerformanceMonitor from './PerformanceMonitor.vue'

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const searchStore = useSearchStore()
const {
  themeConfig,
  setThemeMode,
  setPrimaryColor,
  setFontSize,
  toggleCompactMode,
  resetTheme
} = useTheme()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 主题设置
const currentThemeMode = ref(themeConfig.value.mode)
const primaryColor = ref(themeConfig.value.primaryColor || '#409eff')
const fontSize = ref(themeConfig.value.fontSize || 'medium')
const compactMode = ref(themeConfig.value.compactMode || false)

// 预定义颜色
const predefineColors = [
  '#409eff',
  '#67c23a',
  '#e6a23c',
  '#f56c6c',
  '#909399',
  '#c71585',
  '#ff4500',
  '#32cd32',
  '#1e90ff',
  '#ff1493'
]

// 性能设置
const virtualScrollThreshold = ref(100)
const searchDebounceDelay = ref(300)
const cacheSize = ref(200)
const enablePerformanceMonitoring = ref(false)
const showPerformanceMonitor = ref(false)

// 用户偏好
const defaultSearchType = ref<'filename' | 'content' | 'advanced'>('filename')
const defaultPageSize = ref(50)
const autoSaveSearchHistory = ref(true)
const showFilePreview = ref(true)

// 构建时间
const buildTime = new Date().toLocaleString('zh-CN')

// 事件处理
const handleThemeModeChange = (mode: 'light' | 'dark' | 'auto') => {
  setThemeMode(mode)
  ElMessage.success('主题模式已更新')
}

const handlePrimaryColorChange = (color: string) => {
  setPrimaryColor(color)
  ElMessage.success('主色调已更新')
}

const handleFontSizeChange = (size: 'small' | 'medium' | 'large') => {
  setFontSize(size)
  ElMessage.success('字体大小已更新')
}

const handleCompactModeChange = (enabled: boolean) => {
  toggleCompactMode()
  ElMessage.success(enabled ? '已启用紧凑模式' : '已禁用紧凑模式')
}

const handleVirtualScrollThresholdChange = (value: number) => {
  // 这里可以保存到本地存储或全局配置
  localStorage.setItem('virtualScrollThreshold', value.toString())
  ElMessage.success('虚拟滚动阈值已更新')
}

const handleSearchDebounceDelayChange = (value: number) => {
  localStorage.setItem('searchDebounceDelay', value.toString())
  ElMessage.success('搜索防抖延迟已更新')
}

const handleCacheSizeChange = (value: number) => {
  localStorage.setItem('cacheSize', value.toString())
  ElMessage.success('缓存大小已更新')
}

const handlePerformanceMonitoringChange = (enabled: boolean) => {
  localStorage.setItem('enablePerformanceMonitoring', enabled.toString())
  ElMessage.success(enabled ? '已启用性能监控' : '已禁用性能监控')
}

const clearAllCaches = () => {
  searchStore.clearSearchCache()
  // 清理其他缓存
  ElMessage.success('所有缓存已清空')
}

const resetPerformanceSettings = () => {
  virtualScrollThreshold.value = 100
  searchDebounceDelay.value = 300
  cacheSize.value = 200
  enablePerformanceMonitoring.value = false
  
  localStorage.removeItem('virtualScrollThreshold')
  localStorage.removeItem('searchDebounceDelay')
  localStorage.removeItem('cacheSize')
  localStorage.removeItem('enablePerformanceMonitoring')
  
  ElMessage.success('性能设置已重置')
}

const handleClose = () => {
  visible.value = false
}

// 加载保存的设置
const loadSettings = () => {
  const savedVirtualScrollThreshold = localStorage.getItem('virtualScrollThreshold')
  if (savedVirtualScrollThreshold) {
    virtualScrollThreshold.value = parseInt(savedVirtualScrollThreshold)
  }
  
  const savedSearchDebounceDelay = localStorage.getItem('searchDebounceDelay')
  if (savedSearchDebounceDelay) {
    searchDebounceDelay.value = parseInt(savedSearchDebounceDelay)
  }
  
  const savedCacheSize = localStorage.getItem('cacheSize')
  if (savedCacheSize) {
    cacheSize.value = parseInt(savedCacheSize)
  }
  
  const savedEnablePerformanceMonitoring = localStorage.getItem('enablePerformanceMonitoring')
  if (savedEnablePerformanceMonitoring) {
    enablePerformanceMonitoring.value = savedEnablePerformanceMonitoring === 'true'
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-section {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setting-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.setting-description {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  margin-top: 4px;
}

.setting-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.about-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.about-label {
  color: var(--el-text-color-regular);
}

.about-value {
  font-weight: 500;
  color: var(--el-text-color-primary);
}
</style>